import React from 'react'
import './TopNav.css'
import {Link} from 'react-router-dom'
import Tel from '../../images/tel.png'
import {connect} from 'react-redux'
import {getUsers} from '../../store/Login.redux'
//顶部导航组件
@connect(
  state =>({
    users:state.Login.users
  }),{
    getUsers  
  }  
)
class TopNav extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user:sessionStorage.getItem('name')
        }
        
    }
    componentDidMount(){
        let userName = this.state.user
        this.props.getUsers(userName)
    }
    //注销按钮
    logout=()=>{
        sessionStorage.removeItem('name');
        window.location.href='/index'
    }
    render() {
        if(this.state.user!=null){
                return (
                    <div className="topNav">
                        <div className="topNav_cont"> 
                            {/* {
                                console.log(this.props.users.data[0].name)//获取用户昵称
                            } */}
                            <span>Hi</span><span className='mine'><Link to="/minecont">骑着蜗牛狂飙</Link></span>
                            <span className='logout' onClick={this.logout}>[注销]</span>
                            <ul className="topNav_right widthAdd">
                                <li><Link to="/minecont">我的生活一家</Link></li>
                                <li><a href="http://www.seozihao.com">收藏夹</a></li>
                                <li><Link to="#"><img src={Tel} alt=''/>生活一家APP下载</Link></li>
                            </ul>
                        </div>
                    </div>
                )
            }else{
            return (
                <div className="topNav">
                    <div className="topNav_cont">
                        <ul className="topNav_right">
                            <li><Link to="/login">[登录]</Link></li>
                            <li><Link to="/register">[注册]</Link></li>
                            <li><Link to="/minecont">我的账号</Link></li>
                            <li><Link to="#"><img src={Tel} alt=''/>生活一家APP下载</Link></li>
                        </ul>
                    </div>
                </div>
            )
        }   
    }
}
export default TopNav